<template>
  <div class="scroll-container">
    <div class="card-wrapper">
      <div
        v-for="(person, index) in displayPersons"
        :key="index"
        class="person-card"
        @click="showDetails(person)"
      >
        <div class="card-inner">
          <div class="photo-box">
            <img
              :src="person.photo || defaultImage"
              class="person-photo"
              :alt="`${person.name}的照片`"
              @error="handleImageError"
            />
            <div v-if="!person.photo" class="no-photo-overlay">
              <span class="no-photo-text">暂无照片</span>
            </div>
            <div class="info-overlay">
              <div class="info-content">
                <h2 class="name">{{ person.name }}</h2>
                <div class="meta-info">
                  <span class="age">{{ person.age }}岁</span>
                  <span class="separator">|</span>
                  <span class="time">{{ formatDate(person.missingDate) }}</span>
                </div>
                <div class="location">
                  <span class="icon">📍</span>
                  {{ person.location }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Teleport to="body">
    <Transition name="modal-fade">
      <div v-if="selectedPerson" class="modal-mask" @click.self="closeModal">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <h2 style="color: red;">{{ selectedPerson.name }} 详细信息</h2>
              <button class="close-btn" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <div class="modal-photo">
                <img
                  :src="selectedPerson.photo || defaultImage"
                  class="detail-photo"
                  :alt="`${selectedPerson.name}的详细信息照片`"
                  @error="handleImageError"
                />
                <div v-if="!selectedPerson.photo" class="no-photo-overlay detail">
                  <span class="no-photo-text">暂无照片</span>
                </div>
              </div>
              <div class="detail-info">
                <div class="info-section">
                  <h3 style="color: red; border-bottom: 2px solid red;">基本信息</h3>
                  <div class="info-grid">
                    <div class="info-item">
                      <span class="label">年龄：</span>
                      <span class="value">{{ selectedPerson.age }}岁</span>
                    </div>
                    <div class="info-item">
                      <span class="label">失踪时间：</span>
                      <span class="value">{{ formatDate(selectedPerson.missingDate) }}</span>
                    </div>
                    <div class="info-item full-width">
                      <span class="label">失踪地点：</span>
                      <span class="value">{{ selectedPerson.location }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">性别：</span>
                      <span class="value">{{ selectedPerson.gender }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">民族：</span>
                      <span class="value">{{ selectedPerson.nationality }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">身高：</span>
                      <span class="value">{{ selectedPerson.height }}cm</span>
                    </div>
                    <div class="info-item">
                      <span class="label">体重：</span>
                      <span class="value">{{ selectedPerson.weight }}kg</span>
                    </div>
                    <div class="info-item">
                      <span class="label">发型：</span>
                      <span class="value">{{ selectedPerson.hairStyle }}</span>
                    </div>
                  </div>
                </div>
                <div class="info-section">
                  <h3 style="color: red; border-bottom: 2px solid red;">特征描述</h3>
                  <pre class="description">{{ selectedPerson.description }}</pre>
                </div>
                <div class="info-section contact">
                  <h3 style="color: red; border-bottom: 2px solid red;">联系方式</h3>
                  <div class="contact-info">
                    <p><span class="icon" style="color: red;">📞</span> 家属电话：132-1234-5678</p>
                    <p><span class="icon" style="color: red;">🏢</span> 报警电话：110</p>
                    <p><span class="icon" style="color: red;">📧</span> 家属邮箱：example@example.com</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface MissingPerson {
  name: string
  age: number
  missingDate: string
  location: string
  description: string
  photo: string
  gender: string
  nationality: string
  height: number
  weight: number
  hairStyle: string
}

// 内置失踪人员数据
const defaultPersons: MissingPerson[] = [
  {
    name: "王小华",
    age: 8,
    missingDate: "2023-05-15T16:30",
    location: "北京市朝阳区朝阳公园南门",
    description: "失踪时特征：\n• 身高120cm\n• 蓝色校服\n• 红色书包\n• 左脸酒窝\n• 右臂有椭圆形胎记",
    photo: "https://picsum.photos/300/400?random=1",
    gender: "男",
    nationality: "汉族",
    height: 120,
    weight: 25,
    hairStyle: "短发"
  },
  {
    name: "张建国",
    age: 72,
    missingDate: "2023-06-01T09:00",
    location: "上海市南京东路步行街",
    description: "特征描述：\n• 灰色短发\n• 金属框眼镜\n• 阿尔茨海默病患者\n• 左腿行动不便\n• 佩戴银色手表",
    photo: "https://picsum.photos/300/400?random=2",
    gender: "男",
    nationality: "汉族",
    height: 170,
    weight: 65,
    hairStyle: "短发"
  },
  {
    name: "李晓梅",
    age: 15,
    missingDate: "2023-06-10T18:45",
    location: "广州市天河体育中心地铁站",
    description: "最后出现时：\n• 身高160cm\n• 白色连衣裙\n• 黑色帆布鞋\n• 马尾辫\n• 携带粉色水杯",
    photo: "https://picsum.photos/300/400?random=3",
    gender: "女",
    nationality: "汉族",
    height: 160,
    weight: 50,
    hairStyle: "马尾辫"
  },
  {
    name: "陈小明",
    age: 10,
    missingDate: "2023-07-05T14:20",
    location: "深圳市福田区中心公园",
    description: "失踪时特征：\n• 身高135cm\n• 黄色T恤\n• 蓝色牛仔裤\n• 黑色运动鞋\n• 右耳有耳洞",
    photo: "https://picsum.photos/300/400?random=4",
    gender: "男",
    nationality: "汉族",
    height: 135,
    weight: 30,
    hairStyle: "平头"
  },
  {
    name: "赵丽华",
    age: 65,
    missingDate: "2023-07-15T10:30",
    location: "成都市春熙路步行街",
    description: "特征描述：\n• 花白短发\n• 戴老花镜\n• 穿红色外套\n• 左手戴玉镯\n• 说话带四川口音",
    photo: "https://picsum.photos/300/400?random=5",
    gender: "女",
    nationality: "汉族",
    height: 155,
    weight: 55,
    hairStyle: "短发"
  },
  {
    name: "刘强",
    age: 12,
    missingDate: "2023-08-01T17:45",
    location: "武汉市江汉路步行街",
    description: "最后出现时：\n• 身高145cm\n• 蓝色校服\n• 黑色运动鞋\n• 背黑色书包\n• 左脸有酒窝",
    photo: "https://picsum.photos/300/400?random=6",
    gender: "男",
    nationality: "汉族",
    height: 145,
    weight: 35,
    hairStyle: "寸头"
  },
  {
    name: "孙芳",
    age: 16,
    missingDate: "2023-08-10T19:30",
    location: "南京市新街口地铁站",
    description: "特征描述：\n• 身高165cm\n• 粉色连衣裙\n• 白色凉鞋\n• 长发及肩\n• 右臂有胎记",
    photo: "https://picsum.photos/300/400?random=7",
    gender: "女",
    nationality: "汉族",
    height: 165,
    weight: 48,
    hairStyle: "长发"
  },
  {
    name: "王建国",
    age: 68,
    missingDate: "2023-08-20T08:15",
    location: "杭州市西湖景区",
    description: "最后出现时：\n• 身高175cm\n• 灰色中山装\n• 黑色布鞋\n• 戴草帽\n• 拄拐杖",
    photo: "https://picsum.photos/300/400?random=8",
    gender: "男",
    nationality: "汉族",
    height: 175,
    weight: 70,
    hairStyle: "秃顶"
  }
]

// 响应式数据
const selectedPerson = ref<MissingPerson | null>(null)

// 方法
const showDetails = (person: MissingPerson) => {
  selectedPerson.value = person
}

const closeModal = () => {
  selectedPerson.value = null
}

const formatDate = (isoString: string) => {
  const date = new Date(isoString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 添加显示数据
const displayPersons = computed(() => [...defaultPersons, ...defaultPersons])

// 新增样式
const defaultImage = "https://via.placeholder.com/300x400?text=暂无照片"

const handleImageError = () => {
  // 处理图片加载错误后的逻辑
}
</script>

<style scoped>
/* 滚动容器 */
.scroll-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.card-wrapper {
  display: flex;
  height: 80%;
  align-items: center;
  padding: 0 24px;
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 12px));
  }
}

.card-wrapper:hover {
  animation-play-state: paused;
}

/* 卡片样式 */
.person-card {
  flex-shrink: 0;
  margin-right: 24px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  height: 100%;
  width: auto;
}

.person-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 10px 24px rgba(204, 0, 0, 0.2);
}

.card-inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
}

.photo-box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.person-photo {
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.3s ease;
}

/* 信息浮层 */
.info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 30%, transparent);
  color: white;
  padding: 20px;
}

.info-content {
  position: relative;
  z-index: 2;
}

.name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #ffcccc;
  margin-bottom: 12px;
}

.separator {
  opacity: 0.6;
}

.location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.icon {
  font-size: 16px;
}

/* 模态框样式 */
.modal-mask {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-wrapper {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

.modal-container {
  background: var(--background-color);
  border-radius: 16px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.close-btn {
  font-size: 32px;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.close-btn:hover {
  opacity: 0.8;
}

.modal-body {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 14px;
  padding: 16px;
  height: calc(100vh - 200px);
}

.modal-photo {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.detail-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.info-section {
  margin-bottom: 14px;
}

.info-section h3 {
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  margin-right: 8px;
  font-weight: 500;
}

.description {
  white-space: pre-line;
  line-height: 1.6;
}

/* 新增样式 */
.full-width {
  grid-column: span 2; /* 使失踪地点占据整行 */
}

/* 新增样式 */
.no-photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-photo-text {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
